<template>
	<view class="attr-content">
		<view class="a-t">
			<image class="image" mode="widthFix" :src="picture || product.picture"></image>
			<view class="right">
				<text class="title">{{ product.name }}</text>
				<view class="sku-info-wrapper">
					<view class="price-wrapper">
						<image mode="aspectFit" class="image"
							v-if="product.memberDiscount && product.memberDiscount.length !== 0 && product.memberDiscount.discount > 0 && price > 0"
							:src="vipPrice"></image>
						<text :class="'text-blue'"
							v-if="price">{{ moneySymbol }}{{ currentProductPrice }}</text>
					</view>
					<text class="stock"
						v-if="product.is_stock_visible=='1'&&parseInt(product.stock, 10) > 0">库存：{{ product.stock }}{{ product.unit || '件' }}</text>
					<text class="stock" v-else-if="parseInt(product.stock, 10) > 0">库存：有货</text>
					<text class="stock" v-else>库存：库存不足</text>
					<view class="selected in2line" v-if="specSelected.length > 0">
						已选：
						<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
							{{ sItem.title }}
						</text>
						<text v-if="specSelected.length > 0"> * {{ cartCount }} </text>
					</view>
				</view>
			</view>
		</view>
		<scroll-view class="attr-content-scroll-view" scroll-y>
			<view v-for="(item, index) in specList" :key="index" class="attr-list">
				<text>{{ item.title }}</text>
				<view class="item-list">
					<view v-for="(childItem, childIndex) in specChildList" :key="childIndex" @tap="
							selectSpec(childIndex, childItem.base_spec_id, item.show_type)
						">
						<view v-if="childItem.base_spec_id === item.base_spec_id"
							:class="[childItem.selected ? 'bg-blue' : 'tit-normal', childItem.disabled ? 'disabled' : '']"
							:style="
								childItem.selected && parseInt(item.show_type) === 2
									? styleObject
									: ''
							" class="tit">
							<text v-if="parseInt(item.show_type) === 1">
								{{ childItem.title }}
							</text>
							<text v-if="parseInt(item.show_type) === 2">
								{{ childItem.title }}
							</text>
							<view v-if="parseInt(item.show_type) === 3">
								<image class="img" :src="childItem.data || product.picture" mode="aspectFill"></image>
								{{ childItem.title }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="select-count" v-if="isSelectedNum">
				<text>购买数量</text>
				<!--				<rf-number-box-->
				<!--					v-if="parseInt(stock || product.stock, 10) === 0"-->
				<!--					class="step"-->
				<!--					:disabled="true"-->
				<!--					:min="0"-->
				<!--					:max="0"-->
				<!--					@eventChange="numberChange"-->
				<!--				></rf-number-box>-->

				<!-- 代言专区最大数量1 -->
				<rf-number-box v-if="sgid==11000003" class="step" :min="parseInt(product.min_buy, 10) || minNum" max="1"
					:value="cartCount" @eventChange="numberChange"></rf-number-box>

				<rf-number-box v-else class="step" :min="parseInt(product.min_buy, 10) || minNum"
					:max="parseInt(product.max_buy, 10) || (maxNum === 0 ? parseInt(stock || product.stock, 10) : maxNum)"
					:value="cartCount" @eventChange="numberChange"></rf-number-box>




				<!--					:max="parseInt(stock || product.stock, 10)"-->
			</view>
		</scroll-view>
		<button v-if="!showBuyBtn" class="btn" :class="'bg-blue' " @tap="toggleSpec">完成</button>
		<view class="btn-group" v-else>
			<button :disabled="addCartBtnDisabled" class="btn" :class="'bg-blue'"
				@tap="toggleSpec(1)">加入购物车</button>
			<button :disabled="buyBtnDisabled" class="btn" :class="'bg-blue'"
				@tap="toggleSpec(2)">立即购买</button>
		</view>
	</view>
</template>
<script>
	/**
	 *@des 商品规范组件
	 *@author stav stavyan@qq.com
	 *@blog https://stavtop.club
	 *@date 2020/05/03 19:17:15
	 */
	import rfNumberBox from '@/components/rf-number-box';
	export default {
		name: 'rfAttrContent',
		components: {
			rfNumberBox
		},
		props: {
			sgid: {
				type: String,
				default () {
					return '0';
				}
			},
			showBuyBtn: {
				type: Boolean,
				default: false
			},
			isSelectedNum: {
				type: Boolean,
				default: true
			},
			type: {
				type: String,
				default: 'buy_now'
			},
			product: {
				type: Object,
				default () {
					return {};
				}
			},
			minNum: {
				type: Number,
				default: 1
			},
			maxNum: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				styleObject: null,
				specList: [],
				specChildList: [],
				skuId: this.product && this.product.sku_id,
				price: null,
				stock: null,
				cartCount: parseInt(this.product.min_buy, 10) || this.minNum || 1,
				picture: null,
				specSelected: [],
				moneySymbol: this.moneySymbol,
				skuName: null
			};
		},
		computed: {
			// 购买按钮禁用
			buyBtnDisabled() {
				return parseInt(this.product.stock, 10) === 0 || this.product.is_buy === 0;
			},
			// 添加购物车按钮禁用
			addCartBtnDisabled() {
				let arr = ['11000001', '11000002', '11000003', '11000005']
				return
				this.product.point_exchange_type === '2' ||
					this.product.point_exchange_type === '4' ||
					parseInt(this.product.stock, 10) === 0 ||
					this.product.is_virtual === '1' ||
					this.product.disabled_cart ||
					!!arr.find(item => {
						return item === this.sgid
					})

			},
			currentDiscountPrice() {
				const decimal = this.product.marketing.decimal_reservation_number;
				const discount = this.product.marketing.discount;
				const price = this.price;
				switch (parseInt(decimal, 10)) {
					case -1:
						return (price * discount / 100).toFixed(2);
					case 0:
						return (price * discount / 100).toFixed(0);
					case 1:
						return (price * discount / 100).toFixed(1);
					default:
						return (price * discount / 100).toFixed(2);
				}
			},
			currentProductPrice() {
				let price = this.price;
				if (this.type === 'discount') {
					price = this.currentSkuPrice || this.currentDiscountPrice;
				}
				if (this.type === 'group_buy') {
					price = this.currentSkuPrice || this.product.marketing.ladder.price;
				}
				if (this.product.memberDiscount && this.product.memberDiscount.length !== 0) {
					price = price * (1 - this.product.memberDiscount.discount / 100);
				}
				return parseFloat(price || '0').toFixed(2);
			}
		},
		async mounted() {
			await this.initData();
		},
		methods: {
			initData() {
				this.specList = this.product.base_attribute_format;
				this.specList.forEach(item => {
					this.specChildList = [...this.specChildList, ...item.value];
					// if (!this.product.sku_name) {
					// 	item.value[0].selected = true;
					// 	this.specSelected.push(item.value[0]);
					// }
				});
				if (this.product.sku_name) {
					this.specChildList.forEach(item => {
						if (this.product.sku_name.indexOf(item.title) !== -1) {
							item.selected = true;
							this.specSelected.push(item);
						}
					});
				}
				let skuStrArr = [];
				this.specSelected.forEach(item => {
					skuStrArr.push(item.base_spec_value_id);
				});
				this.product.sku.forEach(item => {
					if (item.data === skuStrArr.join('-')) {
						this.stock = item.stock;
						if (this.type === 'buy_now') {
							this.price = item.price;
						} else {
							this.price = this.product.marketing_type === 'wholesale' ? item.wholesale_price : item
								.price;
						}
						this.skuName = item.name;
						this.skuId = item.id;
					}
				});
			},
			numberChange(data) {
				this.cartCount = parseInt(data.number, 10);
			},
			// 选择规格
			selectSpec(index, pid, type) {
				let list = this.specChildList;
				list.forEach(item => {
					if (item.base_spec_id === pid) {
						this.$set(item, 'selected', false);
					}
				});
				if (parseInt(type, 10) === 3) {
					this.picture = list[index].data;
				}
				if (parseInt(type, 10) === 2) {
					this.styleObject = {
						color: list[index].data,
						border: `1px solid ${list[index].data}`
					};
				}
				this.$set(list[index], 'selected', true);
				// 存储已选择
				/**
				 * 修复选择规格存储错误
				 * 将这几行代码替换即可
				 * 选择的规格存放在specSelected中
				 */
				this.specSelected = [];
				list.forEach(item => {
					if (item.selected === true) {
						this.specSelected.push(item);
					}
				});
				let skuStr = [];
				this.specSelected.forEach(item => {
					skuStr.push(item.base_spec_value_id);
				});
				this.product.sku.forEach(item => {
					if (item.data === skuStr.join('-')) {
						this.picture = item.picture;
						this.stock = item.stock;
						this.price = this.product.marketing_type === 'wholesale' ? item.wholesale_price : item
							.price;
						this.skuId = item.id;
						this.skuName = item.name;
					}
					// else {
					// 	if (item.data.indexOf(skuStr.join('-')) !== -1) {
					// 		console.log('skuStr', skuStr);
					// 		console.log('item.data', item.data);
					// 		this.specChildList.forEach(item2 => {
					// 			if (item2.base_spec_value_id === '120') {
					// 				item2.disabled = true;
					// 			}
					// 		});
					// 		// console.log(this.specChildList);
					// 	}
					// }
				});
			},
			toggleSpec(type) {
				if (!this.skuId) {
					this.$mHelper.toast('请选择规格');
					return;
				}
				if (this.stock < 1) {
					this.$mHelper.toast('库存不足');
					return;
				}
				this.$emit('toggle', {
					stock: this.stock,
					skuId: this.skuId,
					cartCount: this.cartCount,
					skuName: this.skuName || this.singleSkuText,
					price: this.price,
					type: type
				});
			}
		}
	};
</script>
<style scoped lang="scss">
	.sku-info-wrapper {
		width: 100%;
		padding-bottom: $spacing-sm;
	}

	.price-wrapper {
		height: 38upx;
		display: flex;
		align-items: center;
		margin: $spacing-sm 0;

		.image {
			width: 120upx;
			height: 38upx;
		}

		.base-color {
			margin-top: 2upx;
		}
	}

	.btn-group {
		display: flex;
		justify-content: space-between;

		.btn {
			width: 40vw;
		}
	}

	.title {
		width: 100%;
		height: auto;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
</style>
